<script>
export default {
  props: ['id'],
  data() {
    return {
      homelist: [],
      hotsale: [
        {
          id: 'aaa',
          content: '今日特卖1'
        },
        {
          id: 'bbb',
          content: '今日特卖2222'
        },
        {
          id: 'ccc',
          content: '今日特卖3'
        }
      ],
      femalecloth: [
        {
          id: 'aaa',
          content: '女装1'
        },
        {
          id: 'bbb',
          content: '女装2'
        },
        {
          id: 'ccc',
          content: '女装3'
        }
      ],
      childcloth: [
        {
          id: 'aaa',
          content: '童装1'
        },
        {
          id: 'bbb',
          content: '童装2'
        },
        {
          id: 'ccc',
          content: '童装3'
        }
      ]
    }
  },

  mounted() {
    this.homelist = this.hotsale
  },

  // watch: {
  //   $route(to, from) {
  //     switch(to.params.id) {
  //       case '001':
  //         this.homelist = this.hotsale
  //         return
  //       case '002':
  //         this.homelist = this.femalecloth
  //         return
  //       case '003':
  //         this.homelist = this.childcloth
  //         return 
  //     }
  //   }
  // },

  beforeRouteEnter(to, from, next) {
    console.log('from home enter')
    next()
  },

  beforeRouteUpdate(to, from, next) {
    //     switch(to.params.id) {
  //       case '001':
  //         this.homelist = this.hotsale
  //         return
  //       case '002':
  //         this.homelist = this.femalecloth
  //         return
  //       case '003':
  //         this.homelist = this.childcloth
  //         return 
  //     }
  //   }
    // console.log(200)
    next()
  },

  beforeRouteLeave(to, from, next) {
    console.log(to)
    next()
  },

  methods: {
    handleClick() {
      // 编程式导航
      this.$router.push({
        name: 'details',
        query: {
          id: 100
        }
      })
    },

    handleGoto() {
      this.$router.push({
        // path: '/index/home',
        name: 'home',
        params: {
          id: '003'
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <router-link :to="{name: 'home', params: { id: '001' }}" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="{active: isActive}">今日特卖</li>
      </router-link>
      <router-link to="/index/home/002" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="{active: isActive}">女装</li>
      </router-link>
      <router-link to="/index/home/003" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="{active: isActive}">童装</li>
      </router-link>
    </ul>
    <div>
      <div 
        v-for="list in homelist" 
        :key="list.id"
        @click="handleClick"
      >
        {{list.content}}
      </div>
      <div>
        ID: {{$route.params.id}}
      </div>
      <div>
        <button @click="handleGoto">goto</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
ul {
  display: flex;
  border-bottom: solid 1px #ccc;
  li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    &.active {
      background: #eee;
    }
  }
}
</style>
